<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>巡检系统</el-breadcrumb-item>
            <el-breadcrumb-item>巡检地点</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="findPointData" class="demo-form-inline">
        <el-row>
            <el-col :span="5">
                <el-form-item label="巡检点编号">
                    <el-input v-model="findPointData.pointNo"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="巡检点名称">
                    <el-input v-model="findPointData.pointName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="巡检点地址">
                    <el-input v-model="findPointData.address"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                 <el-form-item>
                    <el-button type="info" @click="onSubmit">查询</el-button>
                    <el-button @click="clear">清空</el-button>
                </el-form-item>
            </el-col>
        </el-row>
      </el-form>

        <el-button type="success" @click="addPoint" class="btn1" plain>添加</el-button>
      <!-- 巡检点列表 -->
      <div class="bbb">
        <el-table class="tab1" :data="pointListData" stripe style="width: 100%">
            <el-table-column type="index" :index="index" label="序号" width=""></el-table-column>
            <el-table-column prop="pointNo" label="巡检点编号" width=""></el-table-column>
            <el-table-column prop="pointName" label="巡检点名称" width=""></el-table-column> 
            <el-table-column prop="address" label="巡检点地址" width=""></el-table-column>
            <el-table-column prop="remark" label="备注" width=""></el-table-column>
            <el-table-column label="操作" width="350">
                <template slot-scope="scope">
                    <el-button @click="updatePoint(scope.row)" size="mini" round>修改</el-button>
                    <el-button type="primary" @click="deletePoint(scope.row)" size="mini" round>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <el-pagination class="pag"
            layout="prev, pager, next"
            :total="totle"
            :page-size='pageSize'
            @current-change='change'>
        </el-pagination>


        <!-- 添加巡检点弹框 -->
        <el-dialog title="添加巡检地点" width="30%" :visible.sync="addPointVisible">
            <el-form :model="addPointData" ref="addRu" :rules="addRules">

             <el-row>
                <el-col>
                <el-form-item label="巡检地点编号" label-width="110px" prop="no">
                    <el-input v-model="addPointData.pointNo" placeholder="请输入巡检地点编号"></el-input>
                </el-form-item>
            </el-col>
             </el-row>

             <el-row>
                <el-col>
                <el-form-item label="巡检地点名称" label-width="110px" prop="name">
                    <el-input v-model="addPointData.pointName" placeholder="请输入巡检地点名称"></el-input>
                </el-form-item>
            </el-col>
             </el-row>
            
            
   
            <el-row>
                <el-form-item label="巡检地点地址" label-width="110px" prop="address">
                    <el-input v-model="addPointData.address" placeholder="请输入巡检地点地址"></el-input>
                </el-form-item>
            </el-row>

            <el-row>
                <el-form-item label="巡检地点备注" label-width="110px">
                    <el-input type="textarea" v-model="addPointData.remark" placeholder="请输入巡检地点备注"></el-input>
                </el-form-item>
            </el-row>
            


            

                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addPointVisible = false">取 消</el-button>
                <el-button type="primary" @click="addPointgo('addRu')">添 加</el-button>
            </div>
        </el-dialog>

        <!-- 修改巡检点弹框 -->
        <el-dialog title="添加巡检地点" width="30%" :visible.sync="updatePointVisible">
            <el-form :model="addPointData" ref="addRulers" :rules="addRules">

             <el-row>
                <el-col>
                <el-form-item label="巡检地点编号" label-width="110px" prop="pointNo">
                    <el-input v-model="addPointData.pointNo" placeholder="请输入巡检地点编号"></el-input>
                </el-form-item>
            </el-col>
             </el-row>

             <el-row>
                <el-col>
                <el-form-item label="巡检地点名称" label-width="110px" prop="pointName">
                    <el-input v-model="addPointData.pointName" placeholder="请输入巡检地点名称"></el-input>
                </el-form-item>
            </el-col>
             </el-row>
            
            
   
            <el-row>
                <el-form-item label="巡检地点地址" label-width="110px" prop="address">
                    <el-input v-model="addPointData.address" placeholder="请输入巡检地点地址"></el-input>
                </el-form-item>
            </el-row>

            <el-row>
                <el-form-item label="巡检地点备注" label-width="110px">
                    <el-input type="textarea" v-model="addPointData.remark" placeholder="请输入巡检地点备注"></el-input>
                </el-form-item>
            </el-row>
            


            

                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updatePointVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatePointgo('addRulers')">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            findPointData:{
                pointNo:'',
                pointName:'',
                address:''
            },
            totle:50,
            pageSize:5,
            pageIndex:1,
            pointListData:[],

            // 添加巡检点框标志
            addPointVisible:false,
            // 添加数据
            addPointData:{
                id:'',
                pointNo:'',
                pointName:'',
                address:'',
                remark:'',
            },



            updatePointVisible:false,




            // 添加表单验证
            addRules:{
                pointNo:[
                    {required: true, message: '请输入巡检地点编号', trigger: 'blur'},
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                pointName:[
                    {required: true, message: '请输入巡检地点名称', trigger: 'blur'},
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                address:[
                    {required: true, message: '请输入巡检地点地址', trigger: 'blur'},
                ],
            },
        }
        
    },
    methods:{
        index(dex){
              return (this.pageIndex-1)*this.pageSize+dex+1;
        },
        change(a){
            console.log(a);
            this.pageIndex=a;
            this.getPointList();
        },
        onSubmit(){
            this.pageIndex=1;
            this.getPointList();
        },
        clear(){
            this.findPointData.pointNo='';
            this.findPointData.pointName='';
            this.findPointData.address='';
        },
        getPointList(){
            this.axios.post("point/pointList?pageSize="+this.pageSize+"&pageIndex="+this.pageIndex,this.findPointData).then(res=>{
                this.totle=res.data.data.total;
                this.pointListData=res.data.data.list;
            })
        },
        // 添加按钮点击事件
        addPoint(){
            this.addPointData.pointNo='';
            this.addPointData.pointName='';
            this.addPointData.address='';
            this.addPointData.remark='';
            this.addPointVisible=true;
        },
        // 提交添加
        addPointgo(addRu){
            this.$refs[addRu].validate((valid) => {
                    if (valid) {
                        this.axios.post("point/addPoint",this.addPointData).then(res=>{
                            this.$message(res.data.msg);
                            this.addPointVisible=false;
                            this.getPointList();
                        })
                    } else {
                        return false;
                    }
                });

           
        },
        // 点击修改按钮
        updatePoint(row){
            
            this.addPointData.id=row.id;
            this.addPointData.pointNo=row.pointNo;
            this.addPointData.pointName=row.pointName;
            this.addPointData.address=row.address;
            this.addPointData.remark=row.remark;
            this.updatePointVisible=true;
        },

        // 提交修改
        updatePointgo(addRulers){
            this.$refs[addRulers].validate((valid) => {
                    if (valid) {
                        this.axios.post("point/updatePoint",this.addPointData).then(res=>{
                            this.$message(res.data.msg);
                            this.updatePointVisible=false;
                            this.getPointList();
                        })
                    } else {
                        return false;
                    }
                });

            
        },
        // 删除巡检点
        deletePoint(row){
            this.$confirm('您所做的操作危险,是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                        this.axios.get("point/deletePoint?id="+row.id).then(res=>{
                            this.$message(res.data.msg);
                            this.getPointList();
                        })
                })
            
        }
    },
    created(){
        this.getPointList()
    }
    
}
</script>

<style scoped>
    .el-breadcrumb{
      height: 60px;
      line-height: 60px;
      font-size: 17px;
      margin-left: 30px;
  }
  .btn1{
      margin-left: 30px;
  }
  .pag{
      text-align: center;
  }
  .bbb{
      height: 400px;
      width: 1450px;
  }
</style>